<template>
  <!-- 维斯回复 -->
  <div class="wsContent">
    <div style="font-size: 24px; line-height: 44px">场景对话配置</div>
    <el-card>
      <el-table :data="tableData" style="width: 100%" size="small" border>
        <el-table-column prop="name" label="标题"></el-table-column>
        <el-table-column prop="name1" label="回复策略"></el-table-column>
        <el-table-column prop="name2" label="多轮对话">
          <template slot-scope="scope">
            <div style="color: green" v-if="scope.row.name2 == '启用'">
              {{ scope.row.name2 }}
            </div>
            <div style="color: red" v-else>
              {{ scope.row.name2 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="信息采集" prop="name3">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.name3" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="name4" label="输入条件"></el-table-column>
        <el-table-column prop="name5" label="输出条件"></el-table-column>
        <el-table-column prop="name6" label="AI回复"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <i class="el-icon-edit" @click="Hander('edit', scope.row)" style="font-size: 18px; color: #4b8df0; margin-right: 20px"></i>
            <i class="el-icon-delete" @click="Hander('del', scope.row)" style="font-size: 18px; color: red"></i>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="addBtn"><el-button type="primary" icon="el-icon-plus" @click="(dialogVisible = true), (add = 0)">新增配置</el-button></div>
    <el-dialog :visible.sync="dialogVisible" :title="add == 0 ? '添加场景下的对话条目' : '修改场景下的对话条目'" :before-close="handleClose" :show-close="false">
      <div class="formCss">
        <div class="form-tit">对话信息</div>
        <div class="form-row">
          <span>标题：</span>
          <div>
            <el-input v-model.trim="form.name" placeholder="请输入内容" size="small"></el-input>
          </div>
          <i>*必填项</i>
        </div>
        <div class="form-row">
          <span>回复策略：</span>
          <div class="groupCss">
            <el-radio-group v-model="form.name1" style="box-sizing: border-box; padding: 0 10px">
              <el-radio label="随机">随机</el-radio>
              <el-radio label="顺序">顺序</el-radio>
              <el-radio label="与提问对应的位置">与提问对应的位置</el-radio>
            </el-radio-group>
            <i>“AI回复”有多条的情况下的回复内容选取方式”</i>
          </div>
        </div>
        <div class="form-row">
          <span>多轮对话：</span>
          <div>
            <el-radio-group v-model="form.name2" style="box-sizing: border-box; padding: 0 10px">
              <el-radio label="启用">启用</el-radio>
              <el-radio label="禁用">禁用</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="form-row">
          <span>信息采集：</span>
          <div><el-switch v-model="form.name3" active-color="#13ce66" inactive-color="#ff4949"></el-switch></div>
        </div>
        <div class="form-tit">对话条件</div>
        <div class="form-row">
          <span>输入条件：</span>
          <div><el-input v-model.trim="form.name4" placeholder="请输入内容" size="small"></el-input></div>
        </div>
        <div class="form-row">
          <span>输出条件：</span>
          <div><el-input v-model.trim="form.name5" placeholder="请输入内容" size="small"></el-input></div>
        </div>
        <div class="form-tit">AI回复</div>
        <div class="form-row">
          <span>AI回复：</span>
          <div><el-input v-model.trim="form.name6" placeholder="请输入内容" size="small"></el-input></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Hander('add')" size="small">立即提交</el-button>
        <el-button @click="Hander('reset')" size="small">重 置</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      add: 0,
      form: { id: 1, name: '', name1: '随机', name2: '启用', name3: true, name4: '', name5: '', name6: '' },
      dialogVisible: false,
      tableData: [],
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    Hander(type, data) {
      if (type == 'add') {
        if (!this.form.name) {
          this.$message.error('请填写完成后提交');
          return;
        }
        if (this.add == 1) {
          let idx = this.tableData.findIndex(item => item.id == this.form.id);
          let copyDataList = JSON.parse(JSON.stringify(this.tableData));
          copyDataList[idx] = this.form;
          this.tableData = copyDataList;
        } else {
          this.tableData.push(this.form);
        }

        this.dialogVisible = false;
        this.form = { id: new Date().getTime(), name: '', name1: '随机', name2: '启用', name3: true, name4: '', name5: '', name6: '' };

        localStorage.setItem('wstabledata', JSON.stringify(this.tableData));
        return;
      }
      if (type == 'reset') {
        this.form = { ...this.form, ...{ name: '', name1: '随机', name2: '启用', name3: true, name4: '', name5: '', name6: '' } };
        return;
      }
      if (type == 'del') {
        let idx = this.tableData.findIndex(item => item.id == data.id);
        this.tableData.splice(idx, 1);
      }
      if (type == 'edit') {
        this.form = { ...this.form, ...data };
        this.add = 1;
        this.dialogVisible = true;
      }
    },
  },

  created() {
    this.tableData = JSON.parse(localStorage.getItem('wstabledata')) || [];
  },
};
</script>
<style lang="less" scoped>
.addBtn {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
}
.form-tit {
  height: 35px;
  background: #f4f4f4;
  line-height: 35px;
  font-size: 14px;
  font-weight: 600;
  color: #4b8df0;

  box-sizing: border-box;
  padding: 0 20px;
}
.form-row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 8px 0;
  height: 46px;
  line-height: 30px;
  align-items: center;
}
.form-row > span {
  width: 92px;
  min-width: 92px;
  height: 100%;
  background: #f4f4f4;
  border-radius: 4px 0 0 4px;
  border: 1px solid #d2d2d2;
  align-items: center;
  text-align: center;
}
.form-row > div {
  border: 1px solid #d2d2d2;
  width: 100%;
  align-items: center;
  height: 100%;
  overflow: hidden;
  border-radius: 0 4px 4px 0;
}
.form-row /deep/ .el-input {
  border: 1px solid transparent !important;
  height: 30px !important;
  box-sizing: border-box !important;
}
.form-row /deep/ .el-input__inner {
  border: 1px solid transparent !important;
  height: 30px !important;
  box-sizing: border-box !important;
}
.form-row i {
  min-width: 200px;
  text-align: center;
  font-style: normal;
  color: red;
}
/deep/.el-dialog__footer {
  text-align: center !important;
}
.groupCss i {
  font-style: normal;
  color: #999;
  font-size: 12px;
}
</style>
